<style lang="scss" scoped="scoped">
  @import "../utils/base.scss";

  .header_title {
    height: 50px;
    line-height: 32px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .col_paddingleft {
    padding-left: 12px
  }

  .ivu-btn-text:hover {
    border-color: #75b5FF;
  }

  .b-badge {
    position: relative;
    display: inline-block;
  }

  .b-badge-dot {
    position: absolute;
    transform: translateX(-50%);
    transform-origin: 0 center;
    top: -4px;
    right: -8px;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: #ed4014;
    z-index: 10;
    box-shadow: 0 0 0 1px #fff;
  }

  .ivu-select-dropdown {
    max-height: 50vh;
  }

  .ivu-cascader-menu {
    max-height: 50vh;
    height: auto;
  }
</style>

<template>
  <div class="quest_content">

    <div class="header_title " style=" border-bottom: 1px solid rgb(210,210,210);">
      <div style="height: 32px;">
        <span style="font-weight:bold;font-size: 16px" class="step_1">首页</span>
        <div style="float:right;" class="step_2">
          <Button v-if="this.$hasPerm('allReq')" :type="clickid == 0? 'info':'default'"
            @click="setClickInfo(0)">所有工单({{AllProcessList.total > 99 ? '99+':AllProcessList.total}})</Button>
          <Button :type="clickid == 1? 'info':'default'"
            @click="setClickInfo(1)">我的发起({{MyProcessList.total > 99 ? '99+':MyProcessList.total}})</Button>
          <span class="b-badge">
            <Button :type="clickid == 2? 'info':'default'"
              @click="setClickInfo(2)">我的待办({{TodosProcessList.total > 99 ? '99+':TodosProcessList.total}})</Button>
            <sup v-if="TodosProcessList.total > 0" class="b-badge-dot"></sup>
          </span>
          <Button :type="clickid == 3? 'info':'default'"
            @click="setClickInfo(3)">已处理({{DonesProcessList.total > 99 ? '99+':DonesProcessList.total}})</Button>
          <!-- <Button :type="clickid == 3? 'info':''"    @click="setClickInfo(3)">进行中({{total}})</Button> -->
          <Button :type="clickid == 4? 'info':'default'"
            @click="setClickInfo(4)">我的草稿({{DraftsList.total > 99 ? '99+':DraftsList.length}})</Button>
        </div>
      </div>
    </div>
    <Form :label-width="labelWidth" label-position="right" style="overflow-y:auto;height: calc(100vh - 143px);">
      <template v-if="clickid != 4">
        <Row class="header_title">
          <Col span="4">
          <FormItem label="工单类型" style="margin-bottom: 0px;">
            <Select v-model="searchInfo.serviceType" placeholder="工单类型" :transfer="true">
              <Option value="all">全部工单</Option>
              <template v-for="item in allServiceType">
                <Option :value="item.serviceType">{{item.depname}}</Option>
              </template>
            </Select>
          </FormItem>
          </Col>
          <Col span="4" class="col_paddingleft">
          <FormItem label="租户项目" style="margin-bottom: 0px;">
            <Cascader :data="roleList" style="width:100%" filterable :transfer="true" @on-change="selectProject">
            </Cascader>
          </FormItem>
          </Col>

          <Col span="4" class="col_paddingleft">
          <FormItem label="工单编号" style="margin-bottom: 0px;">
            <Input v-model="searchInfo.reqId" placeholder="工单号" @on-enter="search()" />
          </FormItem>
          </Col>
          <Col span="4" class="col_paddingleft">
          <FormItem label="创建者" style="margin-bottom: 0px;">
            <Input v-model="searchInfo.oriUserName" placeholder="工单创建者" @on-enter="search()" />
          </FormItem>
          </Col>
          <Col span="2" style="text-align: center">
          <a style="position: relative;" href="javascript:void(0)" @click="setMore">{{isSearchMore?'收起>>':'更多>>'}}</a>
          </Col>
          <Col span="6" style="text-align: end;">
            <Button type="text" @click="refresh()"><span style="color: #2d8cf0;">
                <Icon type="md-refresh" size="15" style="padding-right:8px;line-height: 8px;" />刷新
              </span></Button>
            <Button type="primary" @click="search()">
              <Icon type="md-search" size="15" style="padding-right:8px;line-height: 8px;" />查询
            </Button>
          </Col>
        </Row>
        <Row v-if="isSearchMore" class="header_title" style="padding-top: 0px;">
          <Col span="4">
          <FormItem label="工单状态" style="margin-bottom: 0px;">
            <Select v-model="searchInfo.reqStatus" placeholder="需求状态">
              <Option value=-1>全部状态</Option>
              <Option value=2>完成</Option>
              <Option value=1>待处理</Option>
              <Option value=0>关闭</Option>
              <Option value=3>退回</Option>
              <Option value=4 v-if="clickid == 2 || clickid == 3">超时</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="4" class="col_paddingleft">
          <FormItem label="工单标题" style="margin-bottom: 0px;">
            <Input v-model="searchInfo.reqSubject" placeholder="工单标题" @on-enter="search()" />
          </FormItem>
          </Col>
          <Col span="4" class="col_paddingleft">
          <FormItem label="开始时间" style="margin-bottom: 0px;">
            <DatePicker v-model="searchInfo.lowTime" @on-change="setStaerDate" format="yyyy-MM-dd" type="date"
              placeholder="开始时间" class="left-col"></DatePicker>
          </FormItem>
          </Col>
          <Col span="4" class="col_paddingleft">
          <FormItem label="结束时间" style="margin-bottom: 0px;">
            <DatePicker v-model="searchInfo.upTime" @on-change="setEndDate" format="yyyy-MM-dd" type="date"
              placeholder="结束时间" class="left-col"></DatePicker>
          </FormItem>
          </Col>
        </Row>
      </template>
      <div>
        <Row style="width:100%;margin-bottom:10px; padding-top:8px">
          <Col span="26" v-if="clickid != 4" style="width: 100%;">
          <Table :row-key="clickid == 0 ? 'reqId':''" :loading="tableLoading" border
            :columns="clickid == 2 ? columns1:columns2" :max-height="tableHeight" :data="processList.records">
            <template slot-scope="{ row, index }" slot="state">
              <template v-if="row.status == 1">待处理</template>
              <template v-else-if="row.status === 2">完成</template>
              <template v-else-if="row.status === 3">退回</template>
              <template v-else-if="row.status === 0">关闭</template>
              <template v-else-if="row.status === 4">撤回</template>
            </template>
            <template slot-scope="{ row, index }" slot="reqSubject">
              <span>{{"【" + row.processName+ '】'+row.reqSubject}}</span>
            </template>
            <!-- <template slot-scope="{ row, index }" slot="processName">
                                        <span>{{row.processName  + (row.reqSubject!=null &&  row.reqSubject != row.processName? '/'+row.reqSubject: '')}}</span>
                                    </template> -->
            <template slot-scope="{ row, index }" slot="processName">
              <span>{{row.processName}}</span>
            </template>
            <template slot-scope="{row, index}" slot="reqDes">
              <Tooltip max-width="200" :transfer="true" style="white-space: normal;">
                <p style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;width: 140px;">
                  {{row.reqDes}}
                </p>
                <template slot="content" style="white-space: normal;">{{row.reqDes}}</template>
              </Tooltip>
            </template>
            <template slot-scope="{ row, index }" slot="startTime">
              {{formatDate(row.startTime)}}
            </template>

            <template slot-scope="{ row, index }" slot="action">
              <div style="display: inline-block;">
                <a href="javascript:void(0)" @click="showinfo(row)">
                  <div class="text_link" style="width: 50px;" v-show="clickid != 2">
                    查看
                  </div>
                </a>
                <template v-if="clickid == 1 && row.status == 1">
                  <Poptip confirm :transfer="true" placement="top-end" title="是否确认催办该工单?" @on-ok="sendUrge(row)">
                    <div class="text_link" style="width: 50px;">
                      催办
                    </div>
                  </Poptip>
                </template>
                <template v-if="(clickid == 3 || clickid == 1) && row.canRecall == 1 ">
                  <Poptip confirm :transfer="true" placement="top-end" title="是否确认撤回该工单?" @on-ok="recall(row)">
                    <div class="text_link" style="width: 50px;">
                      撤回
                    </div>
                  </Poptip>
                </template>
                <a v-if="clickid == 2" href="javascript:void(0)" @click="showinfo(row)">
                  <div class="text_link" style="width: 50px;">
                    处理
                  </div>
                </a>
                <a v-if="row.parentReqId != -1" href="javascript:void(0)" @click="toParent(row)">
                  <div class="text_link" style="width: 70px;">
                    父工单
                  </div>
                </a>
              </div>

            </template>
          </Table>
          <br />
          <Page :total="processList.total" :current="searchInfo.current" :page-size="processList.pagesize"
            style="font-size: 13px; text-align: right; padding-right: 20px;" @on-change="getPageList" prev-text="上一页"
            next-text="下一页" />
          </Col>
          <Col span="24" v-if="clickid == 4">
          <Table border :columns="DraftsColumns" :data="DraftsList">
            <template slot-scope="{ row, index }" slot="id">
              <p>{{index+1}}</p>
            </template>

            <template slot-scope="{ row, index }" slot="startTime">
              {{formatDate(row.startTime)}}
            </template>

            <template slot-scope="{ row, index }" slot="action">
              <Poptip confirm :transfer="true" placement="top-end" title="是否确认删除该工单?" @on-ok="delDrafts(row)">
                <div class="text_link" style="width: 50px;">
                  删除
                </div>
              </Poptip>
              <a href="javascript:void(0)" @click="editDrefts(row)">
                <div class="text_link" style="width: 50px;">
                  编辑
                </div>
              </a>
            </template>
          </Table>
          </Col>
        </Row>
      </div>
    </Form>
  </div>
</template>
<script>
  import vuex from 'vuex';
  import mcontainer from '../comp_chatter/mcontainer'
  import ajax from "../ajax_util"
  import mheader from "../comp_chatter/mheader"
  import mpage from "../comp_chatter/mpage"
  import minfo from "../comp_chatter/minfo"

  export default {
    name: "process",
    components: {
      mheader,
      mcontainer,
      mpage,
      minfo
    },
    data() {
      return {
        tableLoading: false, //表格加载中
        tableHeight: 310,
        tabs: {},
        clickid: 2, //选择查看的状态
        isSearchMore: false,
        menuId: 1, //查看的状态
        labelWidth: 64,
        processid: '',
        username: '',
        title: '',
        total: 10,
        pagesize: 8,
        MenuText: '工单总览',
        columns1: [{
            title: '单号',
            key: 'reqId',
            maxWidth: 200,
            align: 'left',
          },
          {
            title: '工单标题',
            key: 'reqSubject',
            align: 'left',
            slot: 'reqSubject',
            // minWidth:100,
            // maxWidth:200

          },
          {
            title: '所属项目',
            key: 'projectName',
            align: 'left',
            maxWidth: 200
          },
          {
            title: '工单创建者',
            key: 'oriUserName',
            align: 'left',
            maxWidth: 110

          },
          {
            title: '工单开始时间',
            key: 'startTime',
            align: 'left',
            maxWidth: 160,
            slot: "startTime"

          },
          {
            title: '工单状态',
            key: 'status',
            align: 'left',
            slot: "state",
            maxWidth: 100
          },

          {
            title: '当前处理人',
            key: 'operator',
            align: 'left',
            maxWidth: 120
          },
          {
            title: '当前任务节点',
            key: 'currentTaskName',
            align: 'left',
            maxWidth: 150
          },
          {
            title: '操作',
            key: 'handle',
            align: 'center',
            maxWidth: 160,
            slot: 'action',

          },


        ],
        columns2: [{
            title: '单号',
            key: 'reqId',
            width: 200,
            align: 'left',
            tree: true
          },
          {
            title: '工单标题',
            key: 'reqSubject',
            align: 'left',
            slot: 'reqSubject',

          },
          {
            title: '所属项目',
            key: 'projectName',
            align: 'left',
            maxWidth: 200
          },
          {
            title: '工单创建者',
            key: 'oriUserName',
            align: 'left',
            maxWidth: 110

          },
          {
            title: '工单开始时间',
            key: 'startTime',
            align: 'left',
            maxWidth: 160,
            slot: "startTime"

          },
          {
            title: '工单状态',
            key: 'status',
            align: 'left',
            slot: "state",
            maxWidth: 100

          },

          {
            title: '当前处理人',
            key: 'operator',
            align: 'left',
            maxWidth: 110

          },
          {
            title: '操作',
            key: 'handle',
            align: 'center',
            slot: 'action',
            maxWidth: 210,
            // minWidth: 95,
          },


        ],
        DraftsColumns: [{
            title: '序号',
            key: 'id',
            width: 100,
            align: 'center',
            slot: "id"
          },
          {
            title: '需求类型',
            key: 'processName',
            width: 200,
            align: 'left',
            // slot: "serviceType"
          },
          {
            title: '保存时间',
            key: 'startTime',
            align: 'left',
            slot: "startTime",
            minWidth: 100
          },
          {
            title: '操作',
            key: 'handle',
            align: 'center',
            slot: 'action',
            width: 140,
          },
        ],
        allServiceType: [],
        searchInfo: {
          serviceType: "all", //需求类型
          oriUserName: "", //提交人员
          reqSubject: "", //工单标题
          // operator:'',         //当前处理人员
          reqStatus: "-1", //状态
          lowTime: null, //开始时间
          upTime: null, //结束时间
          reqId: "", //需求编号
          current: 1, // 当前页码
          projectId: "", //租户id
        },
        processList: [], //显示的list
        AllProcessList: [],
        MyProcessList: [],
        DonesProcessList: [],
        TodosProcessList: [],
        DraftsList: [],
        userPermission: [],
        timer: null,
        roleList: []
      }
    },
    created: function() {
      this.tabs = this.$store.state.tabs
      this.getAllServiceType()

    },
    mounted: function() {
      console.log(window.innerHeight)
      this.tableHeight = window.innerHeight - 272
      // if(window.innerHeight > 600){
      //     this.tableHeight = 450
      // }
      this.getPerm();
      // 获取待办定时器
      this.timer = setInterval(() => {
        this.getTodosProcessList(this.searchInfo)
      }, 60000)
      this.$nextTick(() => {
        // this.setGuide()
      })
    },
    destroyed() {
      console.log("清除定时器---待办-------------->")
      clearInterval(this.timer); // 清除定时器
      this.timer = null;
    },

    methods: {
      setGuide() {
        var guidanceList = JSON.parse(sessionStorage.getItem("guidanceList"))
        var introId = "90991f9d-300a-4560-8f72-511557dedea7"
        if (this.tabs.tabsPage == 'processmain' && (!guidanceList || guidanceList.findIndex(e => e == introId) == -1)) {
          let data = [{
              element: '.step_1',
              intro: '步骤1：对应class为.step_1的元素进行选择提示。',
              position: 'right'
            },
            {
              element: '.step_2',
              intro: '步骤2：对应Id为#step_2的元素进行选择提示。',
              position: 'left'
            },
          ]
          this.IntroJs().setOptions({
            prevLabel: "上一步",
            nextLabel: "下一步",
            skipLabel: "跳过",
            doneLabel: "完成",
            exitOnEsc: false,
            exitOnOverlayClick: false,
            steps: data
          }).oncomplete(() => {
            this.completeGuidance(guidanceList, introId)
            //点击结束按钮后执行的事件
          }).onexit(() => {
            this.completeGuidance(guidanceList, introId)
            //点击跳过按钮后执行的事件
          }).start()
        }

      },
      /**
       * 完成引导
       */
      completeGuidance(guidanceList, introId) {
        var that = this;
        var url = "http://localhost:8234/completeGuidance/" + this.$store.state.user.fourA + "/" + introId
        ajax.post({
          url: url,
          that: that,
          success: function(data) {
            guidanceList.push(introId)
            sessionStorage.setItem("guidanceList", JSON.stringify(guidanceList))
          }
        })
      },
      // 发送催办消息
      sendUrge(row) {
        var that = this;
        var url = this.CONFIG.base_url_test + '/msgType-notice/' + row.reqId

        ajax.post({
          url: url,
          that: that,
          success: function(data) {
            if (data == 1) {
              that.$Message.success({
                content: '催办成功！',
                duration: 3
              });
            } else {
              that.$Message.error({
                content: '催办失败，已达当日催办次数！',
                duration: 3
              });
            }
          }
        })
      },
      setMore() {
        if (this.isSearchMore) {
          this.isSearchMore = false
          this.tableHeight = this.tableHeight + 45
        } else {
          this.isSearchMore = true
          this.tableHeight = this.tableHeight - 45
        }
      },
      isPerm() {
        if (this.userPermission.indexOf("系统管理员") > -1 || this.userPermission.indexOf("allReq") > -1) {
          this.getAllProcessList(this.searchInfo)
        }
      },
      getPerm() {
        var that = this;
        var url = this.CONFIG.url_know + '/perm';
        ajax.get({
          url: url,
          that: that,
          success: function(data) {
            that.userPermission = data;
            that.isPerm();
          }
        })
      },
      getAllServiceType() {
        var url = this.CONFIG.base_url_test + "/acti-services"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          cache: true,
          cacheTime: 120,
          params: null,
          success: function(data) {
            that.allServiceType = data
            that.allServiceType.push({
              "serviceType": "wisdom",
              "depname": "智慧中台订单",
              "des": "智慧中台订单",
              "key": null,
              "isSon": 2,
              "depkey": "wisdom",
              "id": 26
            })
            that.getListInfo()
          }
        })
      },
      getListInfo() {
        this.searchInfo = {
          serviceType: "all", //需求类型
          oriUserName: "", //提交人员
          reqSubject: "",
          // operator:'',         //当前处理人员
          reqStatus: "-1", //状态
          lowTime: null, //开始时间
          upTime: null, //结束时间
          reqId: "", //需求编号
          current: 1, // 当前页码
        }
        this.getRoleLis(this.$store.state.user.id)
        this.getMyProcessList(this.searchInfo) //所有需求
        this.getTodosProcessList(this.searchInfo) //获取待处理
        this.getDonesProcessList(this.searchInfo) //已办
        this.getDrafts() //草稿
      },
      //获取租户角色
      getRoleLis(userId) {
        var url = this.CONFIG.url_know + "/tenantByUserId/" + userId
        var that = this;
        var param = {
          type: "ALL"
        }
        ajax.get({
          url: url,
          that: that,
          params: param,
          success: function(data) {
            data.forEach(item => {
              var role = {
                value: item.id + "",
                label: item.tenant_name,
                children: []
              }
              item.projects.forEach(project => {
                role.children.push({
                  value: project.id + "",
                  label: project.project
                })
              })
              that.roleList.push(role)
            })
            console.log(that.roleList)
          }
        })
      },
      selectProject(value, selectedData) {
        console.log("====selectProject===", value, selectedData);
        this.searchInfo.projectId = value[1];
      },
      getDrafts() {
        var url = this.CONFIG.base_url_test + "/my/drafts"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.DraftsList = data
            if (that.clickid == 4) {
              that.processList = data
            }
          }
        })
      },
      //已办
      getDonesProcessList(temp) {
        var url = this.CONFIG.base_url_test + "/dones"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: temp,
          success: function(data) {
            that.DonesProcessList = data
            if (that.clickid == 3) {
              that.processList = data
              that.tableLoading = false
            }
          }
        })
      },
      //获取待处理
      getTodosProcessList(temp) {
        var url = this.CONFIG.base_url_test + "/todos"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: temp,
          success: function(data) {
            that.TodosProcessList = data
            if (that.clickid == 2) {
              that.processList = data
              that.tableLoading = false
            }
          }
        })
      },
      //我的请求
      getMyProcessList(temp) {
        var url = this.CONFIG.base_url_test + "/my"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: temp,
          success: function(data) {
            that.MyProcessList = data
            if (that.clickid == 1) {
              that.processList = data
              that.tableLoading = false
            }
          }
        })
      },
      //所有需求
      getAllProcessList(temp) {
        if (this.$hasPerm('allReq')) {
          // var inde = temp.oriUserName.indexOf("查看所有A")
          // if(inde != -1){
          // 	console.log("---->",temp.oriUserName.substring(inde, temp.oriUserName.length-1))
          // 	temp.oriUserName = temp.oriUserName.substring(inde+5, temp.oriUserName.length)
          // 	console.log("查询所有--->",temp)
          // }else {
          // 	console.log("查询部分--->")
          // }
          var url = this.CONFIG.base_url_test + "/all-req"
          var that = this;
          ajax.get({
            url: url,
            that: that,
            params: temp,
            success: function(data) {
              console.log("========", data);
              that.AllProcessList = data
              if (that.clickid == 0) {
                that.processList = data
                that.tableLoading = false
              }
            }
          })
        }
      },
      //页码
      getPageList(page) {
        this.tableLoading = true
        this.processList = []
        this.utils.delay(() => {
          console.log(page)
          this.searchInfo.current = page
          var value = this.clickid
          var string = JSON.stringify(this.searchInfo)
          var temp = JSON.parse(string)

          if (this.searchInfo.lowTime != '' && this.searchInfo.lowTime != null) {
            temp.lowTime = new Date(this.formaTime(this.searchInfo.lowTime) + " 00:00").getTime() / 1000
          }
          if (this.searchInfo.upTime != '' && this.searchInfo.upTime != null) {
            temp.upTime = new Date(this.formaTime(this.searchInfo.upTime) + " 00:00").getTime() / 1000
          }
          if (value == 0) {
            this.getAllProcessList(temp)
          } else if (value == 1) {
            this.getMyProcessList(temp)
          } else if (value == 2) {
            this.getTodosProcessList(temp)
          } else if (value == 3) {
            this.getDonesProcessList(temp)
          } else if (value == 4) {
            this.getDrafts()
          }
        }, 300)
      },
      //查找
      search() {
        this.searchInfo.reqId = this.searchInfo.reqId.trim()
        var numReg = /^[0-9]+$/
        var numRe = new RegExp(numReg)
        if (this.searchInfo.reqId != "" && !numRe.test(this.searchInfo.reqId)) {
          this.$Message.error({
            content: '请输出正确的工单号',
            duration: 3
          });
        } else {
          this.tableLoading = true
          this.processList = []
          this.utils.delay(() => {
            this.searchInfo.current = 1
            var string = JSON.stringify(this.searchInfo)
            var temp = JSON.parse(string)

            if (this.searchInfo.lowTime != '' && this.searchInfo.lowTime != null) {
              temp.lowTime = new Date(this.formaTime(this.searchInfo.lowTime) + " 00:00").getTime() / 1000
            }
            if (this.searchInfo.upTime != '' && this.searchInfo.upTime != null) {
              temp.upTime = new Date(this.formaTime(this.searchInfo.upTime) + " 00:00").getTime() / 1000
            }
            console.log(temp)
            let value = this.clickid
            if (value == 0) {
              this.getAllProcessList(temp)
            } else if (value == 1) {
              this.getMyProcessList(temp)
            } else if (value == 2) {
              this.getTodosProcessList(temp)
            } else if (value == 3) {
              this.getDonesProcessList(temp)
            } else if (value == 4) {} else if (value == 5) {}
          }, 300)
        }
      },
      //刷新
      refresh() {
        this.setClickInfo(this.clickid)
      },
      //根据状态查看对应列表
      setClickInfo(value) {
        this.tableLoading = true
        this.processList = []
        this.utils.delay(() => {
          this.searchInfo = {
            serviceType: "all", //需求类型
            oriUserName: "", //提交人员
            reqSubject: "",
            // operator:'',         //当前处理人员
            reqStatus: "-1", //状态
            lowTime: null, //开始时间
            upTime: null, //结束时间
            reqId: "", //需求编号
            current: 1, // 当前页码
          }
          this.clickid = value
          this.isSearchMore = false

          if (value == 0) {
            this.getAllProcessList(this.searchInfo)
          } else if (value == 1) {
            this.getMyProcessList()
          } else if (value == 2) {
            this.getTodosProcessList()
          } else if (value == 3) {
            this.getDonesProcessList()
          } else if (value == 4) {
            this.getDrafts()
          }
        }, 300)
      },
      //查看工单详情
      showinfo(row) {
        var isName = false //是否已经存在标签
        var key = ""
        if (row.taskId != null) {
          key = row.reqId + row.taskId
        } else {
          key = row.reqId + ''
        }
        this.tabs.list.some(item => {
          if (item.tabKey === key) {
            isName = true
            return
          }
        })

        console.log("isName--->", isName)
        console.log("row--->", row)
        if (!isName) {
          this.tabs.list.push({
            title: this.clickid === 2 ? "处理工单 / " + row.processName : "工单详情 / " + row.processName,
            key: "handle",
            tabKey: key,
            params: {
              serviceType: row.serviceType,
              reqId: row.reqId,
              status: this.clickid,
              taskId: row.taskId
            }
          })
        }
        this.tabs.isEdit = ""
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.tabsPage = key
        this.$store.commit("tabs", this.tabs);
      },
      setStaerDate(date) {
        this.searchInfo.lowTime = date
      },
      setEndDate(date) {
        if (this.searchInfo.lowTime == '') {
          this.$Message.error('开始时间不能为空');
          this.searchInfo.upTime = ''
        } else if (new Date(this.searchInfo.lowTime).getTime() > new Date(date).getTime()) {
          this.$Message.error('开始时间不能大于结束时间');
          this.searchInfo.upTime = ''
        } else {
          this.searchInfo.upTime = date
        }
      },
      //删除草稿
      delDrafts(row) {
        var id = row.id
        var url = this.CONFIG.base_url_test + "/draft/" + id
        var that = this;
        ajax.del({
          url: url,
          that: that,
          success: function() {
            that.$Message.success('删除成功!');
            that.DraftsList.some((item, index) => {
              if (item.id === id) {
                that.DraftsList.splice(index, 1)
                return true;
              }
            })
          }
        })
      },
      editDrefts(row) {
        var isName = false //是否已经存在标签
        this.tabs.list.some(item => {
          if (item.tabKey === row.id + '') {
            isName = true
            return
          }
        })

        if (!isName) {
          this.tabs.list.push({
            title: "编辑工单 / " + row.processName,
            key: "apply",
            tabKey: row.id + '',
            params: {
              depname: row.processName,
              serviceType: row.serviceType,
              draftsId: row.id //是否是草稿
            }
          })
        }
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.tabsPage = row.id + ''
        this.$store.commit("tabs", this.tabs);
      },
      recall(row) {
        var that = this;
        var url = this.CONFIG.base_url_test + "/recall/" + row.reqId
        ajax.put({
          url: url,
          that: that,
          data: null,
          success: function() {
            that.$Message.success('撤回成功!');
            that.clickid = 2
            that.getAllProcessList();
            that.getMyProcessList();
            that.getTodosProcessList(that.searchInfo)
          }
        })
      },
      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        var hours = this.padDate(date.getHours());
        var minutes = this.padDate(date.getMinutes());
        //var seconds = this.padDate(date.getSeconds());
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },
      toParent(row) {
        var isName = false //是否已经存在标签
        var key = row.parentReqId + ''

        this.tabs.list.some(item => {
          if (item.tabKey === key) {
            isName = true
            return
          }
        })

        if (!isName) {
          this.tabs.list.push({
            title: "工单详情 / " + row.processName,
            key: "handle",
            tabKey: key,
            params: {
              serviceType: row.serviceType,
              reqId: row.parentReqId,
              status: 1,
              taskDefKey: null
            }
          })
        }
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.isEdit = ""
        this.tabs.tabsPage = key
        this.$store.commit("tabs", this.tabs);
      },
      formaTime(value) {
        return this.utils.formatDate(new Date(value), "yyyy-MM-dd")
      }


    },
    // props:{
    //     tabs:{
    //     }
    // },
    computed: {
      tabsInfo() {
        return this.$store.state.tabs != undefined && this.$store.state.tabs != null ? this.$store.state.tabs.tabsPage :
          ""
      }
    },
    watch: {
      tabsInfo(newVal, oldVal) {
        if (newVal === "processmain") {
          if (this.clickid == 2) {
            // this.setClickInfo(this.clickid)
            this.getTodosProcessList(this.searchInfo)
          } else if (this.clickid == 4) {
            this.getDrafts()
          }
        }
      }
    }

  }
</script>
